import React from 'react'
// 引入组件
import { Modal, Form, Input, DatePicker, Select } from 'antd'
// 引入时间库 moment 
import moment from 'moment';

const layout = {
    labelCol: { sm: { span: 4 } },
    wrapperCol: { sm: { span: 16 } }
}

const ProductEdit = (props) => {
    const { visible, cancel, confirm, curRow, form } = props
    const { getFieldDecorator } = form
    const { id, title, author, readings, star, status, date } = curRow
    return (
        <Modal title='修改' visible={visible} onCancel={cancel} onOk={confirm}>
            <Form {...layout}>
                <Form.Item label='ID'>
                    {getFieldDecorator('id', {
                        initialValue: id
                    })(
                        <Input disabled />
                    )}
                </Form.Item>
                <Form.Item label='商品'>
                    {getFieldDecorator('title', {
                        rules: [{ required: true, message: '请输入商品名称' }],
                        initialValue: title
                    })(
                        <Input placeholder='请输入商品名称' />
                    )}
                </Form.Item>
                <Form.Item label='客户'>
                    {getFieldDecorator('author', {
                        rules: [{ required: true, message: '请输入客户' }],
                        initialValue: author
                    })(
                        <Input placeholder='请输入客户' />
                    )}
                </Form.Item>
                <Form.Item label='购买量'>
                    {getFieldDecorator('readings', {
                        rules: [{ required: true, message: '请输入购买量' }],
                        initialValue: readings
                    })(
                        <Input placeholder='请输入购买量' />
                    )}
                </Form.Item>
                {/* 推荐指数 */}
                <Form.Item label='推荐指数'>
                    {getFieldDecorator('star', {
                        rules: [{ required: true, message: '请选择推荐指数' }],
                        initialValue: star
                    })(
                        <Select placeholder='请选择推荐指数'>
                            <Select.Option value=''>全部</Select.Option>
                            <Select.Option value={1}>★</Select.Option>
                            <Select.Option value={2}>★★</Select.Option>
                            <Select.Option value={3}>★★★</Select.Option>
                        </Select>
                    )}
                </Form.Item>
                {/* 状态 */}
                <Form.Item label='状态'>
                    {getFieldDecorator('status', {
                        rules: [{ required: true, message: '请选择状态' }],
                        initialValue: status
                    })(
                        <Select placeholder='请选择状态'>
                            <Select.Option value=''>全部</Select.Option>
                            <Select.Option value="published">发布</Select.Option>
                            <Select.Option value="noPublished">未发布</Select.Option>
                        </Select>
                    )}
                </Form.Item>
                {/* 时间 */}
                <Form.Item label='时间'>
                    {getFieldDecorator('date', {
                        rules: [{ required: true, message: '请选择时间' }],
                        initialValue: moment(date)
                    })(
                        <DatePicker showTime format='YYYY-MM-DD HH:mm:ss' placeholder='请选择时间' />
                    )}
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default Form.create()(ProductEdit) 